/**
 * @author 14544
 * @date 2020/3/31 09:56
 */
let TEST_URL = '/gov/gov.do?methodname=queryDocStatuses&serviceid=gov_status';
// formData 是用于保存和发送表单数据的对象。包括file、字段
// 它会被编码并并且发送出去，该请求带有 Content-Type: form-data/multipart。因此，从服务器角度来看，它就像是一个普通的表单提交。
/*{
    document.querySelector('.submitBtn').onclick = function (e) {
        e.preventDefault();
        const form = document.forms['form1']
        let formData = new FormData(form)
        xhrHttp()
        fetchHttp()

        function xhrHttp() {
            let xhr = new XMLHttpRequest();
            xhr.open('POST',TEST_URL,true);
            xhr.setRequestHeader('Content-type','form-data/multipart');
            xhr.onload = function () {
                console.log('xhr:')
                console.log(xhr.response)
            }
            xhr.send(formData)
        }

        function fetchHttp() {
            fetch(TEST_URL,{
                method:"POST",
                headers:{
                    "Content-type":'form-data/multipart'
                },
                body:formData
            }).then(res => res.json()).then(data=>{
                console.log('fetch:')
                console.log(data)
            })
        }
    }
}*/

{
    document.querySelector('.submitBtn2').onclick = function () {
        const formData = new FormData()
        let files = document.getElementsByName('picture')[0].files
        formData.append('name',document.getElementsByName('firstName')[0].value)
        // 添加文件可以有三个参数，最后一个参数可以改变文件名，一般是通过 <input type="file"> 元素从用户文件系统中获取的。
        // 上传多个文件
        for (const file of files) {
            formData.append('file',file,`改变文件名.${file.type.split('/')[1]}`);
            console.log(file)
        }

        xhrHttp()
        fetchHttp()

        function xhrHttp() {
            let xhr = new XMLHttpRequest();
            xhr.open('POST','/gov/openapi/uploadFile',true);
            xhr.setRequestHeader('Content-type','form-data/multipart');
            xhr.upload.onloadstart = function (event) {
                console.log('上传开始')
            };
            // 监听上传进度
            xhr.upload.onprogress = function (event) {
                let rate = `${event.loaded / event.total * 100 + '%'}`;
                console.log(`上传了 ${event.loaded} of ${event.total} bytes，进度：${rate}`)
            };
            xhr.upload.onload = function (event) {
                console.log('上传成功')
                console.log(xhr.response)
            };
            xhr.send(formData)
        }

        // 请注意：到目前为止，对于 fetch 方法的 upload 过程，还没有方法去追踪它。如果想要监听上传过程，请使用 XMLHttpRequest。
        function fetchHttp() {
            fetch('/gov/openapi/uploadFile',{
                method:"POST",
                headers:{
                    "Content-type":'form-data/multipart'
                },
                body:formData
            }).then(res => res.json()).then(data=>{
                console.log('fetch:')
                console.log(data)
            })
        }
    }
}